<template>
  <panel :title="title">
    <!-- 查询信息输入框 -->
    <el-form ref="queryForm" :model="queryForm" label-width="80px">
      <el-form-item label="商品名称">
        <el-input v-model="queryForm.name" placeholder="商品名称"></el-input>
      </el-form-item>
      <!-- 商品分类 -->
      <el-form-item label="商品分类">
        <el-select v-model="queryForm.category" placeholder="请选择商品分类">
          <el-option
            :value="cate.cateName"
            v-for="(cate, index) in categories"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="query-btn">
        <el-button type="warning" @click="queryOrder" size="mini"
          >查询</el-button
        >
        <el-button type="danger" @click="reset" size="mini">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="goodsList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <!-- 商品名称 -->
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <!-- 所属分类 -->
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <!-- 商品图片 -->
            <el-form-item label="商品图片">
              <el-image
                style="width: 40px; height: 40px"
                :src="API + props.row.imgUrl"
                :fit="fit"
              ></el-image>
            </el-form-item>
            <!-- 商品评价 -->
            <el-form-item label="商品评价">
              <span>{{ props.row.rating }}</span>
            </el-form-item>

            <!-- 商品描述 -->
            <el-form-item label="商品描述">
              <span>{{ props.row.goodsDesc }}</span>
            </el-form-item>
            <!-- 商品名称 -->
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <!-- 商品价格 -->
            <el-form-item label="商品价格">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <!-- 创建时间 -->
            <el-form-item label="创建时间">
              <span>{{ props.row.ctime | formatTime }}</span>
            </el-form-item>
            <!-- 商品销量 -->
            <el-form-item label="商品销量">
              <span>{{ props.row.sellCount }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="所属分类" prop="category"> </el-table-column>
      <el-table-column label="商品价格" prop="price"> </el-table-column>
      <el-table-column label="商品图片" prop="imgUrl">
        <template slot-scope="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="API + scope.row.imgUrl"
            :fit="fit"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 编辑弹出模态框 -->
    <el-dialog
      title="编辑商品"
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <!-- 表单 -->
      <el-form ref="editGoodsForm" :model="editGoodsForm" label-width="80px">
        <!-- 商品名称 -->
        <el-form-item label="商品名称">
          <el-input v-model="editGoodsForm.name"></el-input>
        </el-form-item>

        <!-- 所属分类 -->
        <el-form-item label="商品分类">
          <el-select
            v-model="editGoodsForm.category"
            placeholder="请选择商品分类"
          >
            <el-option
              :value="cate.cateName"
              v-for="(cate, index) in categories"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 商品价格 -->
        <el-form-item label="商品价格" required>
          <el-input-number
            v-model="editGoodsForm.price"
            :min="0"
            :max="1000"
            label="描述文字"
          ></el-input-number>
        </el-form-item>

        <!-- 商品图片 -->
        <el-form-item label="商品图片" required>
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:5000/goods/goods_img_upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="editGoodsForm.imgUrl"
              :src="API + editGoodsForm.imgUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <!-- 商品描述 -->
        <el-form-item label="商品描述">
          <el-input
            type="textarea"
            v-model="editGoodsForm.goodsDesc"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancelEdit">取 消</el-button>
        <el-button size="small" type="primary" @click="saveEditGoods"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </panel>
</template>

<script>
import Panel from "@/components/panel/Panel.vue";

// 引入时间格式化工具函数
import {normalizeFullDate} from '@/utils/tools'

// 获取ajax工具函数
import { getGoodList, deleteGood, editGoods, queryCate } from "@/api/goods";

export default {
  inject: ["reload"],
  components: {
    Panel,
  },
  data() {
    return {
      queryForm: {
        name: "",
        category: "",
      },
      categories: [],
      title: "商品列表",
      API: "http://127.0.0.1:5000",
      fit: "fill",
      goodsList: [],
      currentPage: 1, //当前页数
      total: 20,
      pageSize: 5,
      dialogVisible: false,
      editGoodsForm: {
        name: "",
        category: "",
        price: "",
        imgUrl: "",
        goodsDesc: "",
        id: "",
      },
      categories: [],
    };
  },
  filters: {
    formatTime(val) {
      return normalizeFullDate(val)
    }
  },
  methods: {
    //   每页信息个数改变
    handleSizeChange(val) {
      //选中不同的页数时
      this.pageSize = val;
      this.getGoodListData();
    },
    //   当前页改变时触发
    handleCurrentChange(val) {
      //当前页码改变的时候
      this.currentPage = val;
      this.getGoodListData();
    },
    handleSize() {
      this.reload();
    },
    // 关闭模态框
    handleClose() {
      this.dialogVisible = false;
    },
    // 头像上传成功时
    handleAvatarSuccess(data) {
      console.log(data);
      if (data.code === 0) {
        this.editGoodsForm.imgUrl = data.imgUrl;
      }
    },
    // 删除
    async handleDelete(index, row) {
      try {
        let res = await deleteGood(row.id);

        if (res.data.code === 0) {
          this.getGoodListData();
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 保存修改的商品
    async saveEditGoods() {
      try {
        this.editGoodsForm.imgUrl = this.editGoodsForm.imgUrl.substr(23);
        let res = await editGoods(this.editGoodsForm);
        if (res.data.code === 0) {
          this.dialogVisible = false;
          this.getGoodListData();
          console.log(res);
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 编辑商品
    async handleEdit(index, row) {
      this.dialogVisible = true;
      console.log(row);
      this.getCategoryName();
      this.editGoodsForm = row;
    },
    // 取消编辑
    cancelEdit() {
      this.dialogVisible = false;
      this.getGoodListData();
    },
    async getGoodListData() {
      let res = await getGoodList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        name: this.queryForm.name,
        category: this.queryForm.category
      });

      let { total, data } = res.data;

      this.total = total;
      this.goodsList = data;
    },
    // 查询商品列表
    queryOrder() {
      this.currentPage = 1;
      this.getGoodListData();
    },
    // 重置查询表单
    reset() {
      this.queryForm = {}
      this.getGoodListData();
    },
    // 获取商品分类选项
    async getCategoryName() {
      try {
        let res = await queryCate();
        this.categories = res.data.categories;
      } catch (err) {
        console.log(err);
      }
    },
  },
  mounted() {
    window.addEventListener("resize", this.handleSize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleSize);
  },
  created() {
    // 获取商品列表数据
    this.getGoodListData();
    this.getCategoryName();
  },
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

@media screen and (max-width: 1000px) {
  /deep/ .el-table .cell {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .el-button--danger {
    margin-left: 0;
    margin-top: 5px;
  }
}

.pagination {
  margin-top: 20px;
}
/deep/ .el-form {
  display: flex;
  flex-wrap: wrap;
}
.el-table {
  margin-top: 20px;
}
.query-btn {
  /deep/ .el-form-item__content {
    margin-left: 20px !important;
  }
}

/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
/deep/.avatar {
  width: 80px;
  height: 80px;
  display: block;
}

.el-form-item {
  margin-bottom: 15px;
}
</style>